<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-09-15 14:20:16
 * @LastEditors: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @LastEditTime: 2024-06-14 10:45:49
 * @FilePath: \v9\src\views\index\components\EncloCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <!-- 标题 -->
    <div class="content-title">
      <div class="content-title-left">
        <div class="line"></div>
        <span class="span">{{ item.name }}</span>
      </div>
      <div
        class="content-title-right"
        @click="more(item)"
        v-if="item.rightIcon"
      >
        <span class="titles">{{ item.rightIcon.iconName }}</span>
        <div class="imgs">
          <img :src="require('../../../assets/homePage/right.png')" />
        </div>
      </div>
    </div>

    <!-- 小卡片 -->
    <slot name="header"></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 卡片基本信息
    item: {
      type: Object,
      default: () => {},
    },
    minHeihgt: {
      type: Number,
      default: 400,
    },
  },
  data() {
    return {};
  },
  methods: {
    more(item) {
      console.log(item);
      this.$emit("navToMore", item);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.content {
  width: 100%;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  &-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 29px;
    line-height: 29px;
    &-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .line {
        width: 4px;
        height: 12px;
        background: $title_left_line;
      }
      .span {
        margin-left: 9px;
        font-weight: 800;
        color: $standard_font_color;
        font-size: $ordinary_font_size;
      }
    }
    &-right {
      display: flex;
      flex-direction: row;
      align-items: center;
      .titles {
        font-size: $smallOrdinary_font_size;
        font-weight: 400;
        color: $more_font_color;
        line-height: 18px;
      }
      .imgs {
        width: 12px;
        height: 18px;
        margin-left: 8px;
        line-height: 18px;
        img {
          width: 12px;
          height: 12px;
        }
      }
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }

  .card {
    margin-top: 10px;
    .cardBox {
      padding: 12px 15px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      background: #f7faf7;
      border-radius: 10px;
      // margin-bottom: 14px;
      img {
        width: 100%;
        height: 100%;
      }
      .cardBox_span {
        margin-left: 9px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &-title {
          font-weight: 500;
          font-size: $ordinary_font_size;
          color: $auxiliary_font_color;
        }
        &-num {
          margin-top: 18px;
          font-size: $theme_font_size;
          color: $theme_font_color;
          font-weight: 800;
        }
      }
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
      }
    }
    .nullCardBox {
      min-height: 79px;
      padding: 12px 15px 12px 40px;
      align-items: flex-end;
      display: flex;
      background: #f7faf7;
      border-radius: 10px;
      // margin-bottom: 14px;
      &-title {
        color: $theme_font_color;
        font-weight: 800;
        font-size: $theme_font_size;
        letter-spacing: 5px;
      }
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
      }
    }
  }
}
</style>